<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台管理系统</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="/css/font-awesome.css?v=4.4.0" rel="stylesheet">

    <link href="/css/animate.css" rel="stylesheet">
    <link href="/css/style.css?v=4.1.0" rel="stylesheet">
    <script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>
    <!--[if lt IE 9]>
    <meta http-equiv="refresh" content="0;ie.html" />
    <![endif]-->
    <script>if(window.top !== window.self){ window.top.location = window.location;}</script>
    <script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/particles.js/2.0.0/particles.js"></script>
</head>

<body class="gray-bg">

    <div class="middle-box text-center loginscreen  animated fadeInDown">
        <div>
           <!-- <div>

                <h1 class="logo-name">MVC</h1>

            </div>-->
            <h2>高校疫情管理系统</h2>

            <form id="form" class="m-t" role="form" action="/login" method="post" >
                <div class="form-group">
                    <input type="text" id="username" class="form-control" placeholder="用户名" name="username" pattern="[0-9]{12}" required>
                </div>
                <div class="form-group">
                    <input id="password" type="password" class="form-control" placeholder="密码" name="password">
                </div>
                <div id="TencentCaptcha"
                        data-appid="2078609259"
                        data-cbfn="callback"
                        type="submit"
                        class="btn btn-primary block full-width m-b"
                >登录</div>
            </form>
            <a href="/register">未注册？点击注册</a>
            <span id="msg" style="color: red" th:text="${msg}"></span>
        </div>
    </div>

    <!-- 全局js -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.1/js/bootstrap.js"></script>

   <script>
       window.callback = function(res){
           // res（用户主动关闭验证码）= {ret: 2, ticket: null}
           // res（验证成功） = {ret: 0, ticket: "String", randstr: "String"}
           if(res.ret === 0){
               jQuery.post({
                   url : '/verification',
                   asyn:false,
                   data : {
                       'ticket' : res.ticket,
                       'randstr' : res.randstr,
                       'userip' : window.location.host
                   },
                   success : function (result) {
                       var ans = JSON.parse( result ) ;
                       if(ans.CaptchaCode ===1){
                           $("#form").submit();
                       } else {
                           alert( '验证错误' )
                       }
                   }
               })
           }
       }

   </script>

</body>

</html>
